<template>
  <div>{{currentTime}}</div>
</template>

<script>
  export default {
    name: "Clock",
    data() {
      return{
        currentTime : ''
      };
    },
    mounted() {
      // 初始加载页面时立即更新一次时间
      this.updateTime();

      // 设置定时器，每秒更新一次时间
      this.timer = setInterval(this.updateTime, 1000);
    },
    beforeDestroy() {
      // 组件销毁前清除定时器，避免内存泄漏
      clearInterval(this.timer);
    },
    methods: {
      updateTime() {
        const now = new Date();
        const year = now.getFullYear().toString();
        const month = (now.getMonth() + 1).toString().padStart(2, '0');
        const day = now.getDate().toString().padStart(2, '0');
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');
        this.currentTime = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
      }
    }
  }
</script>

<style scoped>

</style>
